import styles from "./index.module.scss"; // 导入样式文件

// 性别选项列表
const genderList = [
  { text: "男", value: "0" },
  { text: "女", value: "1" },
];

// 头像选项列表
const photoList = [
  { text: "拍照", value: "picture" },
  { text: "本地选择", value: "local" },
];

// 组件 Props 类型定义
type Props = {
  type: "" | "gender" | "photo";
  onUpdateProfile: (type: "gender" | "photo", value: string) => void;
  onClose: () => void;
};

// 编辑列表组件
const EditList = ({ type, onUpdateProfile, onClose }: Props) => {
  // 根据 type 获取相应的列表
  const list = type === "gender" ? genderList : photoList;

  return (
    <div className={styles.root}>
      {list.map((item) => (
        <div
          className="list-item"
          key={item.text}
          onClick={() => {
            // 如果 type 为空则不执行更新操作
            if (type === "") return;
            onUpdateProfile(type, item.value);
          }}
        >
          {item.text}
        </div>
      ))}
      {/* 分割线 */}
      <div className="divider"></div>
      {/* 取消按钮 */}
      <div className="list-item" onClick={onClose}>
        取消
      </div>
    </div>
  );
};

export default EditList;
